<template>
  <!-- 主页文章推荐组件 -->
  <div class="article-item">
    <van-cell :to="`/article/${articleList.art_id}`">
      <!-- 文章标题 -->
        <div slot="title">
          <span>{{articleList.title}}</span>
        </div>
        <div slot="label" class="article-head">
   
         <!-- 多个图片显示区域 -->
        <div  class="many-img" v-if="articleList.cover.type > 1">
          <van-image
           v-for="(imgList, index) in articleList.cover.images"
           :key="index"
            width="100"
            height="100"
            fit="cover"
            :src="imgList"
          >
          </van-image>
        </div>
        
            <!-- 文章简单信息显示区域 -->
        <div class="article-bottom">
            <span>{{articleList.aut_name}}</span>
            <span>{{articleList.comm_count}} 评论</span>
            <span>{{articleList.pubdate | relativeTime}}</span>
        </div>

      </div>
 
      <!-- 单个图片显示区域 -->
        <div slot="default" class="single-img" v-if="articleList.cover.type == 1">
            <van-image
                fit="cover"
                :src="articleList.cover.images[0]"
              >
            </van-image>
        </div>
     
      
    </van-cell>
  </div>
</template>

<script>
export default {
     name: 'articleItem',
     props: {
      // 父组件传过来的推荐数据
      articleList: {
        type: Object,
        required: true,
      }
     },
     mounted() {
      // console.log(this.articleList);
     }
}
</script>

<style lang="scss" scoped>
   .article-item {
      border-bottom: 1px solid #f5f5f5;
      .van-cell {
       /deep/ .van-cell__value {
          flex: unset;
          width: 232px;
          height: 146px;
        }
        .single-img{
          margin-left: 10px;
        }
      }
      .article-head {
        .article-bottom {
          margin-top: 15px;
          span {
            margin: 0 10px;
          }
        }
       .many-img{
        display: flex;
        height: 146px;
        margin: 10px 0;
       /deep/ .van-image {
        flex: 33%;
        margin-left: 10px;
          .van-image__img {
            height: 146px;
          }
        }
       } 
      }
   }
</style>